<template>
	<view class="content">
		<view class="header">
			<view class="name">
				<view class="icon">
					<img class="icon-img" src="/static/icon/adress.png" alt="">
				    <text  style="padding-left:20px">梦想小镇</text>
				</view>
				
				<view class="icon">
					<img class="icon-img" src="/static/icon/message.png" alt="">
				</view>
			</view>
			<view class="search">
				<img class="search-icon" src="/static/icon/search.png" alt="">
				<input type="text" placeholder="永辉超市优惠商品" style="padding-left:10px">
			</view>
            <view class="midimg">
				<img class="banner-img" src="/static/imgs/assets/02.jpg" alt="">
			</view>
		</view>
		<view class="middle">
			<view class="list">
				<view class="item"><img class="category-img" src="/static/imgs/assets/super.png">超市便利</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/market.png">菜市场</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/fruits.png">水果店</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/flower.png">鲜花绿植</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/drug.png">医药健康</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/home.png">时尚家居</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/cake.png">烘焙蛋糕</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/sign.png">签到</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/prestige.png">大牌免运</view>
			    <view class="item"><img class="category-img" src="/static/imgs/assets/red.png">红包套餐</view>
			</view>
		</view>
		<view class="footer">
			<view class="con">
				<view class="more">附近店铺</view>
				<view class="more" @click="moreclick"><a href="#"> 查看更多</a></view>
			</view>
			<view class="listcontent" v-for="shop in shops" :key="shop.id" @click="shopclick(shop._id)">
				<view class="listitem">
					<img class="shop-img" :src="shop.imgUrl">	
				</view>
				<view class="listitem listcon">
					{{shop.name}}
					<view class="listrow">
						<view>{{shop._id}}</view>
					   <view>月售：{{shop.sales}}</view>
					   <view>起送：{{shop.expressLimit}}</view>
					   <view>基础运费：{{shop.expressPrice}}</view>
				   </view>
				   <view style="color:red">{{shop.slogan}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      shops: [],
    }
  },
  onLoad() {
    this.shopsdata()//获取店铺数据
  },
  methods: {
    shopsdata() {
      uni.request({
        url: 'http://localhost:3000/hotList',
        success: (res) => {
            this.shops = res.data
        },
      })
    },
	//点击超市跳转
	shopclick(id1) {
	  console.log(id1)
      uni.navigateTo({
        url:`/pages/index/wem?id=${id1}`,
      });
    },
	//更多
	moreclick(){
		uni.navigateTo({
        url:'/pages/index/more',
      });
	}
  }
}
</script>


<style scoped>
	/* 通用图片样式 */
	img {
		display: block;
		max-width: 100%;
		height: auto;
	}
	
	/* 顶部图标 */
	.icon-img {
		width: 30px;
		height: 30px;
	}
	
	/* 搜索图标 */
	.search-icon {
		width: 20px;
		height: 20px;
		padding-left: 20px;
	}
	
	/* 中间横幅图片 */
	.banner-img {
		width: 100%;
		height: auto;
		margin-top: 10px;
	}
	
	/* 分类图标 */
	.category-img {
		width: 40px;
		height: 40px;
		margin-bottom: 5px;
	}
	
	/* 店铺图片 */
	.shop-img {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		object-fit: cover;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.listitem img{
		width: 50px;
		height: 50px;
		border-radius: 4px;
		object-fit: cover;
	}

	.content .header{
		width: 100%;
		background-color: rgb(67, 144, 239);
	}
	.content .header .name{
		font-size: 24px;
		color:azure;
		margin-left: 15px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	.content .header .search{
		border: 1px solid aliceblue;
		border-radius: 2ch;
		display: flex;
		width: 50%;
		background-color: aliceblue;
		margin-top: 15px;
		margin-left: 10px;
	}
	.middle{
      margin-top: 0px;
	  width: 100%;
    }
  .middle .list{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:space-evenly;
	  background-color: rgb(67, 144, 239);
    }
  .middle .list .item{
      width: 20%;
      height: 110px; 
      display: flex;
	  flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px; 
      margin-bottom: 10px; 
    }
	
	/* 附近店铺 下面 */
	.content .footer{
		width: 100%;
		margin-top: 10px;
	}
	.content .footer .con{
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 20px;
	}
	.content .footer .con .more a{
		color: black;
		text-decoration: none;
	}
	.content .footer .con .more a:hover{
		color:blue;
	}
	.content .footer .listcontent{
		margin-top: 20px;
		width: 100%;
		display: flex;
		flex-direction: row;
		border-top: 1px solid grey;
		margin-left: 20px;
		padding-top: 20px;
	}
	.content .footer .listcontent .listitem .listrow{
		display: flex;
		flex-direction: row;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.content .footer .listcontent .listitem .listrow view{
		margin-right: 20px;
	}
	.content .footer .listcontent .listcon{
		margin-left: 30px;
		font-size:25px
	}
	.footer {
	  width: 100%;
	  padding: 12px 15px;
	  box-sizing: border-box;
	  background-color: #fff;
	  border-top: 1px solid #f0f0f0;
	}
	
	.footer-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 12px;
	  padding-bottom: 8px;
	  border-bottom: 1px solid #f5f5f5;
	}
	
	.footer-title {
	  font-size: 15px;
	  font-weight: 600;
	  color: #333;
	}
	
	.more {
	  display: flex;
	  align-items: center;
	  font-size: 12px;
	  color: #666;
	}
	
	.more-icon {
	  width: 12px;
	  height: 12px;
	  margin-left: 4px;
	}
	
	.shop-list {
	  display: flex;
	  flex-direction: column;
	}
	
	.shop-item {
	  display: flex;
	  padding: 12px 0;
	  border-bottom: 1px solid #f5f5f5;
	}
	
	.shop-image {
	  margin-right: 12px;
	}
	
	.shop-img {
	  width: 70px;
	  height: 70px;
	  border-radius: 6px;
	  object-fit: cover;
	}
	
	.shop-info {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.shop-name {
	  font-size: 14px;
	  font-weight: 500;
	  color: #333;
	  margin-bottom: 6px;
	}
	
	.shop-stats {
	  display: flex;
	  flex-wrap: wrap;
	  margin-bottom: 4px;
	}
	
	.shop-stats view {
	  font-size: 11px;
	  color: #666;
	  margin-right: 12px;
	  line-height: 1.5;
	}
	
	.shop-slogan {
	  font-size: 12px;
	  color: #e74c3c;
	}
	
	.content .footer{
			width: 100%;
			margin-top: 10px;
			
		}
		.content .footer .con{
			width: 100%;
			display: flex;
			justify-content: space-between;
			/* background-color: aquamarine; */
			font-size: 20px;
	
		}
		.content .footer .con .more a{
			color: black;
			text-decoration: none;
		}
		.content .footer .con .more a:hover{
			color:blue;
		}
		.content .footer .listcontent{
			margin-top: 20px;
			width: 100%;
			display: flex;
			flex-direction: row;
			border-top: 1px solid grey;
			margin-left: 20px;
			padding-top: 20px;
	
		}
		.content .footer .listcontent .listitem .listrow{
			display: flex;
			flex-direction: row;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.content .footer .listcontent .listitem .listrow view{
			margin-right: 20px;
		}
		.content .footer .listcontent .listcon{
			margin-left: 30px;
			font-size:15px
	
		}
	
   
	
	
</style>